<!--
 作者：ex_baiyc
 日期：2016-11-14
 功能：雷达图组件
 参数：'chartWidth', 'chartHeight', 'chartData'
 事件：将父组件中传递过来的 chartData 赋值给图表
-->
<template>
  <div class="chart-view">
    <div v-if="chartData.series[0].data[0].value.length > 1" :id="chartContainerId" :style="{width: chartWidth, height: chartHeight}">
    </div>
    <!-- <div class="item-data" v-else>
      暂无相关数据
    </div> -->
  </div>
</template>

<script>
//  import Echarts from 'echarts/lib/echarts'
  import 'echarts/lib/chart/radar'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/tooltip'
  /*eslint-disable*/
  export default{
    props: ['chartWidth', 'chartHeight', 'chartData'],
    data () {
      return {
        myChart: {},
        chartContainerId: 'chart-view-container-' + new Date().getMilliseconds() + Math.random().toString(36).substring(3, 8)
      }
    },
    events: {},
    ready: function () {
    },
    watch: {
      'this.chartData.series[0].data[0].value': function(){
        var dataOption = {
          color: this.chartData.colors,
          tooltip: {
            trigger: 'axis',
            position: 'inside'
          },
          legend: {
            x: 'left',
              data: this.chartData.legendData
          },
          radar: [
            {
              indicator: this.chartData.indicator,
              center: ['55%', '60%'],
              radius: '60%'
            }
          ],
            series: this.chartData.series
        }
        this.$nextTick(function () {
          var chartContainer = document.getElementById(this.chartContainerId)
          if (chartContainer) {
            this.myChart = window.Echarts.init(chartContainer)
            this.myChart.setOption(dataOption)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .chart-view {
    position: relative;
  }
</style>
